import { GetActDetail, GetKidsActiveDetail } from "../../../../../utils/data/apis";
import { event } from "../../../../../utils/interface";
import msg from "../../../../../utils/model/msg";

interface DetailList{
  kid: Array<{[key: string]: any}>;
  teacher: Array<Array<{[key: string]: any} > | string>;
  [key: string]: any;
}

const activeDetail: Array<{
  events: Array<{[key: string]: any}>; // 活动详情
  teachers: Array<Array<{[key: string]: any}> | string>; // 导师信息
}> = []; // 一个孩子对应一个元素

// pages/individual/active_detail/components/parent/index.ts
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    user: {
      type: Object
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    activeDetail: {}, // 孩子正在活动
    studentList: [''], // 有正在活动的孩子列表
    studentIndex: 0, // 当前查看的孩子
    studentEventIndex: 0, // 查看的孩子的活动
    detailType: '孩子信息', // 信息类型
    locationEaseOut: false, // 位置信息淡出动画
    showLocation: false, // 是否显示位置信息框
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * @function 获取页面数据
     */
    getData: function() {
      const user: any = this.data.user;
      if(!user) {
        this.setData({
          activeDetail: '',
        })
        return;
      }
      msg.Loading();
      // 获取正在活动数据
      GetKidsActiveDetail({
        pid: user.id
      })
      .then(async (res: any) => {
        if(res.data.code != '200' || res.data.data.information.length == 0) {
          msg.HideLoading();
          return;
        }
        const detailList: Array<Array<DetailList>> = res.data.data.information;
        console.log('孩子正在活动', detailList);
        /**
         * @description 获取到的detailList数据说明
         * @type detailList Array<DetailList>
         * 第一层数组：区分孩子
         * 第二三层数组：Array<{kid: Array<any>, teacher: Array<any>}> 对应该孩子不同的活动和老师
         * 第二层数组只有一个元素
         */
        const studentList: Array<string> = []; // 有活动的孩子名称列表
        detailList.forEach((item: Array<DetailList>) => {
          if(item.length > 0 && item[0].kid.length > 0 && item[0].kid[0].username) {
            studentList.push(item[0].kid[0].username); // 获取学生姓名
            const events = item[0].kid;
            const teachers = item[0].teacher;
            teachers.forEach((value, index: number) => {
              if(value === '未分配导师') {
                teachers[index] = []; // 导师置空
              }
            })
            activeDetail.push({
              events: events,
              teachers: teachers,
            }); // 填充该孩子的活动信息
          }
        })
        this.setData({
          studentList: studentList,
          // activeDetail: activeDetail,
        })
        // 获取活动详情
        for(let index in activeDetail) {
          for(let idx in activeDetail[index].events) {
            activeDetail[index].events[idx].courseDetail = await this.getCourseDetail(activeDetail[index].events[idx].courseid)
          }
        }
        this.setData({
          activeDetail: activeDetail,
        })
        console.log('孩子列表', studentList);
        console.log('活动列表', activeDetail);
        msg.HideLoading();
      })
      .catch(() => {
        this.setData({
          activeDetail: '',
        })
        msg.HideLoading();
      })
    },

    /**
     * @function 获取活动详情
     */
    getCourseDetail: async function(courseid: string) {
      let detail: {[key: string]: any} | undefined = void 0;
      await GetActDetail({
        id: courseid,
        modelName: 'ClubNews'
      })
      .then((res: any) => {
        detail = res.data.data[0];
      })
      .catch(() => {
        msg.Fail('获取活动失败');
      })
      return detail;
    },

    /**
     * @override 以下三端通用，可能需根据不同端口定制入参和出参
     */

    /**
     * @function 信息类型改变
     * @param e 
     */
    filterChange: function(e: event) {
      this.setData({
        detailType: e.detail.type,
      })
    },
    /**
     * @function 选择器->选择查看的学生
     */
    pickStudent: function(e: event) {
      const index = e.detail.value;
      this.setData({
        studentIndex: index,
      })
    },
    /**
     * @function 展示位置信息框
     */
    showLocation: function() {
      let status: boolean = !this.data.showLocation;
      if(!status) {
        // 折叠
        this.setData({
          locationEaseOut: true, // 淡出动画
        })
      }
      else {
        this.setData({
          showLocation: status,
        })
        return;
      }
      const that = this;
      setTimeout(() => {
        that.setData({
          showLocation: status,
          locationEaseOut: false,
        })
      }, 250)
    },
  },
  lifetimes: {
    attached: function() {
      this.getData();
    }
  },
})
